<template>
    <div>
        <el-container>
            <el-header class="select-none">
                <div class="header_left">
                    <img src="../assets/car.png" alt="">
                    <span>车标鉴赏</span>
                </div>
            </el-header>
            <el-main>
                <!--卡片视图-->
                <el-card class="card_outer">
                    <el-row>
                        <el-col :span="12">
                            <!--@clear: 清空搜索栏同时数据全部展示-->
                            <el-input placeholder="请输入内容" class="input-with-select" @change="queryCarBrand"
                                      v-model="queryInfo.query" clearable @clear="clearQueryCarBrand">
                                <el-button slot="append" icon="el-icon-search" @click="queryCarBrand"></el-button>
                            </el-input>
                        </el-col>
                    </el-row>

                    <el-row class="row-content">
                        <el-col :span="3" v-for="item in brandData" :key="item.brandId">
                            <el-card class="inner_card" shadow="hover">
                                <img :src="item.brandLogo" alt="brand"/>
                                <div class="first_letter">
                                    <span class="tip_info">车标展示</span>
                                    <!--<el-button plain size="mini">{{item.firstLetter}}</el-button>-->
                                </div>
                                <el-tooltip effect="dark" :content="item.brandName" placement="top" :enterable="false">
                                    <div class="brand_name">{{item.brandName}}</div>
                                </el-tooltip>
                            </el-card>
                        </el-col>
                    </el-row>
                    <!--layout: 指定分页主键显示-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryInfo.pageIndex"
                            :page-sizes="[16, 32, 64]"
                            :page-size="queryInfo.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-card>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                total: 100,
                queryInfo: {
                    query: '',
                    pageSize: 16,
                    pageIndex: 1
                },
                brandData: []
            }
        }, methods: {
            async queryCarBrand() {
                await this.$http.get('/getCarBrandJuHe', {params: this.queryInfo}).then(res=>{
                    const data = res.data;
                    console.log(data);
                    if (data.code + '' === '200') {
                        console.log(data);
                        this.total = data.count;
                        this.brandData = data.data;
                    } else {
                        this.$message.warning('服务器正在开小差, 请稍后重试哦');
                    }
                }).catch(err=>{
                    console.log(err);
                });


                /*const {data: res} = await this.$http.get('getCarBrandJuHe', {params: this.queryInfo});
                if (res.code + '' === '200') {
                    console.log(res);
                    this.total = res.count;
                    this.brandData = res.data;
                } else {
                    this.$message.warning('服务器正在开小差, 请稍后重试哦');
                }*/
            },
            clearQueryCarBrand() {
                this.queryInfo.query = '';
                this.queryCarBrand();
            },
            // 监听pageSize 改变
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize;
                this.queryCarBrand();
            },
            // 页码值改变的事件
            handleCurrentChange(newPage) {
                this.queryInfo.pageIndex = newPage;
                this.queryCarBrand();
            },

        },
        created() {
            this.queryCarBrand();
            console.log('created');
        },
        mounted() {
            console.log('mounted');
        }
    }
</script>

<style lang="less" scoped>
    .home_container {
        height: 100%;
    }

    .el-header {
        background-color: #373D41;
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #FFF;
        font-size: 24px;

        .header_left {
            margin-left: 20px;
        }

        > div {
            display: flex;
            align-items: center;

            span {
                margin-left: 15px;
            }
        }
    }

    .el-main {
        height: calc(100% - 60px);
    }

    .row-content {
        height: 480px;
        overflow-y: auto;
    }

    .row-content::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    /*滚动区域背景*/
    .row-content::-webkit-scrollbar-track-piece {
        background-color: #f5f5f5;
        -webkit-border-radius: 6px;
    }

    /*竖向滚动条*/
    .row-content::-webkit-scrollbar-thumb:vertical {
        height: 5px;
        background-image: linear-gradient(45deg, #33e4d5 0%, #a183e8 50%);
        -webkit-border-radius: 6px;
    }

    /*横向滚动条*/
    .row-content::-webkit-scrollbar-thumb:horizontal {
        width: 5px;
        background-image: linear-gradient(45deg, #33e4d5 0%, #a183e8 50%);
        -webkit-border-radius: 6px;
    }

    .card_outer {
        min-height: 620px;
        overflow: hidden;
    }

    .inner_card {
        /*width: 140px;
        margin-bottom: 20px;*/
        margin: 15px;
    }

    .first_letter {
        margin: 0;
        text-align: center;

        .tip_info {
            color: #409EFF;
            font-size: 10px;
            line-height: 24px;
            background-color: #F2F6FC;
            border: 1px solid #409EFF;
            padding: 2px 3px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
        }
    }

    .brand_name {
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        /*省略号*/
        text-overflow: ellipsis;
        /*不换行*/
        white-space: nowrap;
    }

    .brand_name:hover {
        color: #e78a42;
    }

</style>
